import React from 'react'
import {HeaderWrapper, Logo, Nav, NavItem,NavSearch,Addition,Button} from './style'
import {connect} from 'react-redux'

class Header extends React.Component {

    render() {
        return (
            <HeaderWrapper>
                <Logo herf="#"/>
                <Nav>
                    <NavItem className="left">首页</NavItem>
                    <NavItem className="left">下载App</NavItem>
                    <NavItem className="left">登录</NavItem>

                    <NavSearch placeholder="搜索" onBlur={this.props.handleBlur} onFocus={this.props.handleFocus} className={this.props.insearch?"insearch":""}/>

                    <NavItem className="right">注册</NavItem>
                    <NavItem className="right">Aa</NavItem>
                </Nav>
                <Addition>
                    <Button className="writting">写文章</Button>
                    <Button className="reg">注册</Button>
                </Addition>
            </HeaderWrapper>
        )
    }

}


const mapStateToProps=(state)=>{
    return {
        insearch:state.insearch
    }
}

const mapDispatchToProps=(dispatch)=>{
    return {
        handleFocus(){
            const action={
                type:"Onfocus"
            }
            dispatch(action)
        },
        handleBlur(){
            const action={
                type:"Outfocus"
            }
            dispatch(action)
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Header)
